<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            background: url("./img/kb.png");
        }

        .table > tbody > tr > td {
            vertical-align: middle;
        }
    </style>
    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed ">
        <tr>
            <td colspan="2" class="text-center">收集用户信息</td>
        </tr>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名" name="name" class="form-control"/></td>
        </tr>
        <tr class="success">
            <td>姓名</td>
            <td><input type="text" placeholder="请输入姓名" name="name" class="form-control"/></td>
        </tr>
        <tr class="info">
            <td>性别</td>
            <td>

                <input type="radio" checked class="radio-line" name="sex"/>男<input name="sex" type="radio"/>女

            </td>
        </tr>
        <tr class="active">
            <td>学历</td>
            <td>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        选择最高学历
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">小学</a></li>
                        <li><a href="#">初中</a></li>
                        <li><a href="#">高中</a></li>
                        <li><a href="#">专科</a></li>
                        <li><a href="#">本科</a></li>
                        <li><a href="#">硕士及以上</a></li>
                    </ul>
                </div>
            </td>

        </tr>

        <tr class="info">
            <td>爱好</td>
            <td>
                <input type="checkbox">唱歌
                <input type="checkbox">跳舞
                <input type="checkbox">电影
                <input type="checkbox">读书
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <button class="btn btn-success btn-block">确认</button>
                <button class="btn btn-danger btn-block">取消</button>
            </td>

        </tr>
    </table>
</div>
</body>
</html>